﻿<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <!-- viewport 控制手机全屏 -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="description" id="description1" content="1">
  <meta name="renderer" content="webkit">
  <meta name="format-detection" content="telephone=no">
  <title>Remind</title>
  <link href="css/main.css" rel="stylesheet" type="text/css">
  <!--
    <link href="css/index.css" rel="stylesheet" type="text/css">
  -->
  <link href="css/becomeTeacher.css" rel="stylesheet" type="text/css">

  <script type="text/javascript" src="js/inc/jquery-2.1.1.js"></script>
  <script type="text/javascript" src="layer/layer.js"></script>

  <script type="text/javascript" src="js/app/main.js"></script>
  <script type="text/javascript" src="js/app/remind.js"></script>
  <script type="text/javascript" src="js/app/sidebar.js"></script>

</head>
<body>
<button onclick="offlineTask();">Offline Task</button>
<button onclick="offlineTaskRequest();">Offline Task Request</button>

<!--<div class="welcome">
  <div class="welcomeCont">
    <h2>Welcome to AskiNow.com</h2>
    <p>Find your <span>online 1-1 private</span> academic tutor</p>
    <p>Find your <span>online 1-1 private</span> career consultant</p>
    <p>Be a <span>flexible</span> consultant with reasonable value</p>
    <p>Our developers are working 24/7 to make our website perfect.</p>
    <p>Our developers are constantly making improve- menst to our website, apologies for any inconve- nience caused !</p>
    <img src="images/welcome.png" alt=""/>
  </div>
</div>-->


<div class="availability">
  <div class="ava-til">
    <h3>Availability</h3>
    <p>Fill your availability to teach online. <br>
      Please note it bases on the server timezone-UTC (Dublin, London, Edinburgh, Lisbon).</p>
  </div>
  <ul class="ava-list">
    <li>
      <div>Monday</div>
      <div>Tuesday</div>
      <div>Wednesday</div>
      <div>Thursday</div>
      <div>Friday</div>
      <div>Saturday</div>
      <div>Sunday</div>
      <div class="period">00:00</div>
    </li>
    <li>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <div class="period">03:00</div>
    </li>
    <li>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <div class="period">06:00</div>
    </li>
    <li>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <div class="period">09:00</div>
    </li>
    <li>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <div class="period">Noon</div>
    </li>
    <li>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <div class="period">15:00</div>
    </li>
    <li>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <div class="period">18:00</div>
    </li>
    <li>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <div class="period">21:00</div>
    </li>
    <li>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <span></span>
      <span class="gray"></span>
      <div class="period">24:00</div>
    </li>
  </ul>
</div>
</body>

<script type="text/javascript">

  $(function () {
    $(".ava-list span").click(function () {
      $(this).toggleClass("active");
    });

  });
</script>
</html>



